<template>
  <div class="main body">
    <div class="center">
      <div class="left">
        <div class="f1">
          <p>飞来峰门票（不含灵隐寺）成人票（6:30-12:00）</p>
          <span>¥45/张</span>
        </div>
        <div class="f2">
          <span>游玩日期</span>
          <div class="date">
            <ul>
              <li @click="now = 1" :class="{ active: now == 1 }">
                <span>今天({{ moment(Date.now()).format("MM月D日") }})</span>
                <h4>不可用</h4>
              </li>
              <li @click="now = 2" :class="{ active: now == 2 }">
                <span
                  >明天({{
                    moment(Date.now() + 24 * 60 * 60 * 1000).format("MM月D日")
                  }})</span
                >
                <h4>￥45</h4>
              </li>
              <li @click="now = 3" :class="{ active: now == 3 }">
                <span
                  >后天({{
                    moment(Date.now() + 2 * 24 * 60 * 60 * 1000).format(
                      "MM月D日"
                    )
                  }})</span
                >
                <h4>￥45</h4>
              </li>
              <li style="border:none">
                <el-date-picker style="width:110px;font-size:12px" type="date" placeholder="其他日期">
                </el-date-picker>
              </li>
            </ul>
            <div>
              <p>游玩日期:2022年08月03日</p>
              <p>请在游玩当天的17:00前完成预订</p>
            </div>
          </div>
        </div>
        <div class="f3">
          <div>购买张数</div>
          <div>
            <button :disabled="number == 1" @click="number--">-</button>
            <input type="text" :value="number" />
            <button :disabled="number >= 5" @click="number++">+</button>
          </div>
          <div>最多订购5张</div>
        </div>
        <!-- 游客信息区 -->
        <div class="user">
          <div class="user_f1">
            <div>游客信息</div>
            <div>请填写所有1位游客信息</div>
            <div>
              <router-link to="/login">登录</router-link>
              <span>查看常用联系人</span>
            </div>
          </div>
          <!-- 用户具体信息区 -->
          <div class="user_msg">
            <div class="form-group">
              <label for="uname">姓名：</label>
              <input
                @focus="empty"
                v-model="visitor_name"
                type="text"
                id="uname"
                placeholder="需与证件姓名一致"
                value=""
              />
              <span
                id="span1"
                style="color: red; font-size: 12px; margin-left: 5px"
              ></span>
            </div>
            <div class="form-group">
              <label for="upwd">手机号：</label>
              <input
                @focus="empty"
                v-model="phone"
                type="text"
                id="upwd"
                placeholder="请填写手机号"
              />
              <span
                id="span2"
                style="color: red; font-size: 12px; margin-left: 5px"
              ></span>
            </div>
            <div class="form-group">
              <label for="re-upwd">身份证：</label>
              <input
                @focus="empty"
                v-model="identity_card"
                type="text"
                id="re-upwd"
                placeholder="请填写真是证件号码"
              />
              <span
                id="span3"
                style="color: red; font-size: 12px; margin-left: 5px"
              ></span>
            </div>
            <input type="checkbox" checked />保存常用联系人
          </div>
        </div>
        <!-- 提交区 -->
        <div class="submit">
          <input type="checkbox" checked /><a href="#"
            >我已阅读并接受合同条款、补充条款及其他所有内容</a
          >
          <button @click="visitorAdd">提交订单</button>
        </div>
      </div>
      <!-- 右侧 购票须知 -->
      <div class="right">
        <div class="title">购票须知</div>
        <div class="refund">
          <h4>退款限制</h4>
          <p>使用日期截止后21天00:00前可申请退款</p>
          <p>不支持部分退款</p>
        </div>
        <div class="msg">
          <h4>入园信息</h4>
          <p>景点名称：灵隐景区</p>
          <p>入园日期：游玩日期当天有效</p>
          <p>入园方式：凭去哪儿发送的电子票直接验证入园</p>
        </div>
        <button><a href="#mask">详情购买须知&gt;&gt;</a></button>
        <div class="total">
          <span>订单总额</span>
          <span>￥45</span>
          <span>(1张)</span>
        </div>
      </div>
      <div id="mask">
        <div class="detail">预留的内容区域</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1, //购买张数
      visitor_name: "", //游客姓名
      identity_card: "", //身份证
      phone: "", //电话
      now: 1, //日期激活
    };
  },
  methods: {
    empty() {
      span1.innerHTML = "";
      span2.innerHTML = "";
      span3.innerHTML = "";
    },
    visitorAdd() {
      let params = `visitor_name=${this.visitor_name}&identity_card=${this.identity_card}&phone=${this.phone}`;
      this.axios.post("/user/visitor_add", params).then((res) => {
        console.log("添加游客身份信息:", res);
        if (res.data.code == 200) {
          alert("添加成功");
        } else if (res.data.code == 201) {
          span1.innerHTML = "姓名不能为空";
        } else if (res.data.code == 202) {
          span2.innerHTML = "手机号不能为空";
        } else if (res.data.code == 203) {
          span3.innerHTML = "身份证号格式不正确";
        } else if (res.data.code == 204) {
          span2.innerHTML = "手机号格式不正确";
        }
      });
    },
  },
};
</script>
<style scoped src="../assets/css/ticket.css"></style>
<style lang="scss" scoped></style>
